---
type: integration
title: '@astrojs/partytown'
description: "Apprenez à utiliser l'intégration @astrojs/partytown dans votre projet Astro."
sidebar:
  label: Partytown
githubIntegrationURL: 'https://github.com/withastro/astro/tree/main/packages/integrations/partytown/'
category: other
i18nReady: true
---
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';

Cette **[intégration Astro][astro-integration]** active [Partytown](https://partytown.qwik.dev/) dans votre projet Astro.

## Pourquoi Astro Partytown

Partytown est une bibliothèque à chargement différé qui permet de déplacer les scripts gourmands en ressources dans un [web worker](https://developer.mozilla.org/fr/docs/Web/API/Web_Workers_API) et hors du [thread principal](https://developer.mozilla.org/fr/docs/Glossary/Main_thread).

Si vous utilisez des scripts tiers à des fins d'analyse ou de publicité, Partytown est un excellent moyen de vous assurer qu'ils ne ralentissent pas votre site.

L'intégration Astro Partytown installe Partytown pour vous et s'assure qu'il est activé sur toutes vos pages.

## Installation

Astro inclut une commande `astro add` pour automatiser l'installation des intégrations officielles. Si vous préférez, vous pouvez [installer les intégrations manuellement](#installation-manuelle) à la place.

Exécutez l'une des commandes suivantes dans une nouvelle fenêtre de terminal.

<PackageManagerTabs>
  <Fragment slot="npm">
    ```sh
    npx astro add partytown
    ```
  </Fragment>
  <Fragment slot="pnpm">
    ```sh
    pnpm astro add partytown
    ```
  </Fragment>
  <Fragment slot="yarn">
    ```sh
    yarn astro add partytown
    ```
  </Fragment>
</PackageManagerTabs>

Si vous rencontrez des problèmes, [n'hésitez pas à nous les signaler sur GitHub](https://github.com/withastro/astro/issues) et essayez les étapes d'installation manuelle ci-dessous.

### Installation manuelle

Tout d'abord, installez le paquet `@astrojs/partytown` :

<PackageManagerTabs>
  <Fragment slot="npm">
    ```sh
    npm install @astrojs/partytown
    ```
  </Fragment>
  <Fragment slot="pnpm">
    ```sh
    pnpm add @astrojs/partytown
    ```
  </Fragment>
  <Fragment slot="yarn">
    ```sh
    yarn add @astrojs/partytown
    ```
  </Fragment>
</PackageManagerTabs>

Ensuite, appliquez l'intégration à votre fichier `astro.config.*` en utilisant la propriété `integrations` :

```js title="astro.config.mjs" ins={2} ins="partytown()"
import { defineConfig } from 'astro/config';
import partytown from '@astrojs/partytown';

export default defineConfig({
  // ...
  integrations: [partytown()],
});
```

## Utilisation

Partytown devrait être prêt à fonctionner sans aucune configuration. Si vous avez un script tiers existant sur votre site, essayez d'ajouter l'attribut `type="text/partytown"` :

```html ins="type="text/partytown""
<script type="text/partytown" src="fancy-analytics.js"></script>
```

Si vous ouvrez l'onglet « Réseau » depuis [les outils de développement de votre navigateur](https://developer.chrome.com/docs/devtools/open/), vous devriez voir le proxy `partytown` intercepter cette requête.

## Configuration

Pour configurer cette intégration, passez un objet 'config' à l'appel de la fonction `partytown()` dans `astro.config.mjs`.

```js title="astro.config.mjs" {5-7}
export default defineConfig({
  // ...
  integrations: [
    partytown({
      config: {
        //les options vont ici
      },
    }),
  ],
});
```

Cela reproduit l'[objet de configuration Partytown](https://partytown.qwik.dev/configuration/) et toutes les options peuvent être définies dans `partytown.config`. Certaines options de configuration courantes pour les projets Astro sont décrites sur cette page.


### Activation du mode débogage

Partytown est livré avec un mode `debug` ; activez-le ou désactivez-le en passant `true` ou `false` à `config.debug`. Si le [mode `debug`](https://partytown.qwik.dev/debugging) est activé, il produira des journaux détaillés dans la console du navigateur.

Si cette option n'est pas définie, le mode `debug` sera activé par défaut en mode [dev](/fr/reference/cli-reference/#astro-dev) ou [preview](/fr/reference/cli-reference/#astro-preview).

```js title="astro.config.mjs" {6}
export default defineConfig({
  // ...
  integrations: [
    partytown({
      // Exemple : Désactiver le mode débogage.
      config: { debug: false },
    }),
  ],
});
```

### Transfert des variables

Les scripts tiers ajoutent généralement des variables à l'objet `window` afin que vous puissiez communiquer avec eux à travers votre site. Mais lorsqu'un script est chargé dans un web-worker, il n'a pas accès à l'objet global `window`.

Pour résoudre ce problème, Partytown peut « patcher » les variables de l'objet de fenêtre globale et les transmettre au script approprié.

Vous pouvez spécifier les variables à transférer avec l'option `config.forward`. [Pour en savoir plus, consultez la documentation de Partytown](https://partytown.qwik.dev/forwarding-events).

```js title="astro.config.mjs" {7}
export default defineConfig({
  // ...
  integrations: [
    partytown({
      // Exemple : Ajouter dataLayer.push comme événement de transfert.
      config: {
        forward: ['dataLayer.push'],
      },
    }),
  ],
});
```

### Proxy pour les requêtes

Certains scripts tiers peuvent nécessiter un proxy (https://partytown.qwik.dev/proxying-requests/) via `config.resolveUrl()`, exécuté dans le service worker. Vous pouvez configurer cette option pour rechercher une URL spécifique et éventuellement renvoyer une URL de proxy à la place :

```js title="astro.config.mjs" {7-13}
export default defineConfig({
  // ...
  integrations: [
    partytown({
      // Exemple : utiliser un proxy pour le script d'analyse de Facebook
      config: {
        resolveUrl: (url) => {
          const proxyMap = {
            "connect.facebook.net": "my-proxy.com"
          }
          url.hostname = proxyMap[url.hostname] || url.hostname;
          return url;
        },
      }
    }),
  ],
});
```

Cependant, étant donné que l'objet `config` est sérialisé lorsqu'il est envoyé au client, certaines limitations sur les fonctions transmises à votre configuration s'appliquent :

- Les fonctions ne peuvent pas référencer quoi que ce soit en dehors de la portée de la fonction.
- Les fonctions ne peuvent être écrites qu'en JavaScript.

Dans certains cas d'utilisation avancés, vous devrez peut-être transmettre des données à cette fonction lors de l'initialisation de Partytown. Pour ce faire, vous pouvez définir `resolveUrl()` dans `window.partytown` au lieu de la configuration d'intégration :

```astro title="Head.astro" {8-14}
---
const proxyMap = {
  "connect.facebook.net": "my-proxy.com"
};
---

<script is:inline set:html={`
  window.partytown = {
    resolveUrl: (url) => {
      const proxyMap = ${JSON.stringify(proxyMap)};
      url.hostname = proxyMap[url.hostname] || url.hostname;
      return url;
    },
  };
`} />
```

Notez que la configuration de l'intégration remplacera `window.partytown` si vous définissez une propriété dans les deux.

## Exemples

* [Parcourir les projets avec Astro Partytown sur GitHub](https://github.com/search?q=%22%40astrojs%2Fpartytown%22+path%3A**%2Fpackage.json\&type=code) pour plus d'exemples !

## Ressources communautaires

* [Implémentation de Google Tag Manager avec Partytown et Astro](https://medium.com/@tagperfect/implementing-google-tag-manager-with-partytown-js-in-astro-my-modest-experience-983388907b35)
* [Optimiser Google Analytics avec Partytown dans Astro](https://ricostacruz.com/posts/google-analytics-in-astro)

[astro-integration]: /fr/guides/integrations-guide/
